import { Button, Space, TableColumnProps, Tag, Typography } from "@arco-design/web-react";
import { FormOptions } from "../../../components/interface";
import ProTable from "../../../components/ProTable/ProTable";
import { IconPlus } from "@arco-design/web-react/icon";
import { getAccountList } from "@/apis/advertising/account";
const { Text } = Typography;
export default function Advertisers(){
  const queryKey = 'getAdvAccountList'; // 查询接口key
    const formOptions: FormOptions[] = [
        {
          fieldName: 'id',
          label: '广告主 ID',
          type: 'Input',
          placeholder: '请输入广告主ID',
          allowClear: true,
        },
        {
          fieldName: 'accountName',
          label: '广告主名称',
          type: 'Input',
          placeholder: '请输入广告主名称',
          allowClear: true,
        },
        {
          fieldName: 'status',
          label: '状态',
          type: 'Select',
          placeholder: '请选择',
          allowClear: true,
          options: [
            { label: '全部', value: null },
            { label: '有效', value: 1 },
            { label: '无效', value: 2 },
          ],
        },
      ];
      const columns: TableColumnProps[] = [
        {
          title: '广告主ID',
          dataIndex: 'id',
          width: 180,
          fixed: 'left',
          align: 'center',
          render: (value: string) => (
            <Text ellipsis={{ cssEllipsis: true }} copyable>
              {value}
            </Text>
          ),
        },
        {
          title: '广告主名称',
          dataIndex: 'accountName',
          align: 'center',
          width: 160,
        },
        {
          title: '广告主类型',
          dataIndex: 'accessType',
          align: 'center',
          width: 160,
          render: (value) => {
            if (value !== null) {
              return <span>{value === 1 ? '程序化三方' : '直投广告主'}</span>;
            } else {
              return <span>--</span>;
            }
          },
        },
        {
          title: '商户名称',
          dataIndex: 'relationMerchantName',
          align: 'center',
          width: 160,
          render: (col, item) => (
            <span>{item?.relationMerchantId ? col : '--'}</span>
          ),
        },
        {
          title: '广告主行业',
          dataIndex: 'industryName',
          align: 'center',
          width: 160,
          render: (col, item) => (
            <span>{item.industryCode === null ? '--' : col}</span>
          ),
        },
        {
          title: '广告账户余额',
          dataIndex: 'balance',
          align: 'center',
          width: 160,
          render: (balance) => `￥ ${balance}`,
        },
        {
          title: '可用余额',
          dataIndex: 'availableBalance',
          align: 'center',
          width: 100,
          render: (availableBalance) =>
            `￥ ${availableBalance}`,
        },
        {
          title: '广告活动',
          dataIndex: 'activityNum',
          align: 'center',
          width: 160,
          // render(col, item) {
          //   return item.activityNum ? (
          //     <Button type="text" onClick={() => handleLinkActivityList(item)}>
          //       {col}
          //     </Button>
          //   ) : (
          //     0
          //   );
          // },
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          width: 120,
          render(_, item) {
            return (
              <span>
                {item.status === 1 ? (
                  <Tag bordered color="green">
                    启用
                  </Tag>
                ) : (
                  <Tag bordered color="red">
                    禁用
                  </Tag>
                )}
              </span>
            );
          },
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          width: 350,
          render(_, item) {
            return (
              <div className="text-primary-acro cursor-pointer">
                <span
                  style={{ margin: '0 5px' }}
                  // onClick={() => {
                  //   setAdvVisible(true);
                  //   setRowData({ ...item });
                  // }}
                >
                  查看
                </span>
                {item.status === 1 && item?.relationMerchantId && (
                  <span
                    style={{ margin: '0 5px' }}
                    // onClick={() => {
                    //   setRechargeVisible(true);
                    //   setRowData({ ...item });
                    // }}
                  >
                    充值
                  </span>
                )}
                <span
                  style={{ margin: '0 5px' }}
                  // onClick={() => updateStatus(item)}
                >
                  {item.status === 1 ? '置为无效' : '置为有效'}
                </span>
                {item.status === 1 && (
                  <span
                    style={{ margin: '0 5px' }}
                    // onClick={() => handleLinkActivity(item)}
                  >
                    创建广告活动
                  </span>
                )}
                {item?.relationMerchantId && (
                  <span
                    style={{ margin: '0 10px' }}
                    // onClick={() => {
                    //   setAccountVisible(true);
                    //   setRowData({ ...item });
                    // }}
                  >
                    账户明细
                  </span>
                )}
              </div>
            );
          },
        },
      ];
    return(
        <>
          <ProTable 
          queryKey={queryKey}
          queryFn={getAccountList} // 查询方法接口
          columns={columns}
          formOptions={formOptions}
          operation={
            <Space>
              <Button type="primary" icon={<IconPlus />}>新增</Button>
            </Space>
          }
          defaultQueryData={{
            commercialAccountType:1,
            source:1,
            id:''
          }}/>
        </>
    )
}